<template>
  <div>
    <h2>标题</h2>
    <header>
      <slot name="header"></slot>
    </header>
    <main><slot></slot></main>
    <footer><slot name="footer"></slot></footer>
  </div>
</template>
<script setup>
import {useSlots,useAttrs,h,defineOptions} from 'vue';
defineOptions({
  name:'Child',
  inheritAttrs:false
});
const slots = useSlots();
const attrs = useAttrs();
console.log(attrs)
console.log(slots)
</script>
<script>
/* import { h } from "vue";
export default {
  setup(props, { slots, attrs }) {
    //slots代表父组件传递给子组件插槽
    console.log(slots);
    //h其实就是createElement,用来创建虚拟DOM
    return () =>
      h(
        `div`,
        {},
        h(`h${attrs.level}`, `${attrs.level}级标题`),
        h("header", slots.header()),
        h("main", slots.default()),
        h("footer", slots.footer())
      );
    )   
  },
}; */
</script>
